<template>
  <div class="cost-item-container">
    <div class="page-header">
      <h2>成本项目管理</h2>
    </div>
    
    <!-- 搜索筛选区域 -->
    <div class="search-container">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="项目名称">
          <el-input style="width: 200px;" v-model="searchForm.itemName" placeholder="请输入项目名称" clearable></el-input>
        </el-form-item>
        
        <el-form-item label="项目编码">
          <el-input style="width: 200px;" v-model="searchForm.itemCode" placeholder="请输入项目编码" clearable></el-input>
        </el-form-item>
        
        <el-form-item label="项目类型">
          <el-select style="width: 120px;" v-model="searchForm.itemType" placeholder="请选择项目类型" clearable>
            <el-option
              v-for="type in costItemTypes"
              :key="type.value"
              :label="type.label"
              :value="type.value"
            ></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="状态">
          <el-select style="width: 120px;" v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="启用" value="1"></el-option>
            <el-option label="停用" value="0"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 数据操作区域 -->
    <div class="action-container">
      <el-button type="primary" @click="handleAdd">
        <el-icon><Plus /></el-icon>新增成本项目
      </el-button>
    </div>
    
    <!-- 列表展示区域 -->
    <div class="table-container">
      <el-table
        v-loading="loading"
        :data="costItemList"
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="itemCode" label="项目编码" width="120"></el-table-column>
        <el-table-column prop="itemName" label="项目名称" width="180"></el-table-column>
        <el-table-column prop="itemType" label="项目类型" width="100">
          <template #default="{ row }">
            {{ formatCostType(row) }}
          </template>
        </el-table-column>
        <el-table-column prop="budgetCycle" label="预算周期" width="100">
          <template #default="{ row }">
            {{ formatBudgetCycle(row) }}
          </template>
        </el-table-column>
        <el-table-column prop="isLeaf" label="是否末级" width="80">
          <template #default="{ row }">
            {{ formatIsLeaf(row) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template #default="{ row }">
            <el-tag :type="row.status === 1 ? 'success' : 'danger'">{{ formatStatus(row) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sortOrder" label="排序" width="80"></el-table-column>
        <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="{ row }">
            <el-button size="small" @click="handleView(row)">查看</el-button>
            <el-button size="small" type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[2,10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    
    <!-- 查看详情对话框 -->
    <el-dialog
      v-model="viewDialogVisible"
      title="查看成本项目详情"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="ID">{{ viewForm.id }}</el-descriptions-item>
        <el-descriptions-item label="项目编码">{{ viewForm.itemCode }}</el-descriptions-item>
        <el-descriptions-item label="项目名称">{{ viewForm.itemName }}</el-descriptions-item>
        <el-descriptions-item label="项目类型">{{ formatCostType(viewForm) }}</el-descriptions-item>
        <el-descriptions-item label="预算周期">{{ formatBudgetCycle(viewForm) }}</el-descriptions-item>
        <el-descriptions-item label="是否末级">{{ formatIsLeaf(viewForm) }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ formatStatus(viewForm) }}</el-descriptions-item>
        <el-descriptions-item label="排序">{{ viewForm.sortOrder }}</el-descriptions-item>
        <el-descriptions-item label="描述">{{ viewForm.description }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    
    <!-- 新增成本项目对话框 -->
    <el-dialog
      v-model="addDialogVisible"
      title="新增成本项目"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form :model="addForm" label-width="120px">
        <el-form-item label="项目编码" prop="itemCode" required>
          <el-input v-model="addForm.itemCode" placeholder="请输入项目编码" maxlength="50"></el-input>
        </el-form-item>
        
        <el-form-item label="项目名称" prop="itemName" required>
          <el-input v-model="addForm.itemName" placeholder="请输入项目名称" maxlength="100"></el-input>
        </el-form-item>
        
        <el-form-item label="项目类型" prop="itemType" required>
          <el-select v-model="addForm.itemType" placeholder="请选择项目类型">
            <el-option
              v-for="type in costItemTypes"
              :key="type.value"
              :label="type.label"
              :value="type.value"
            ></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="预算周期" prop="budgetCycle" required>
          <el-select v-model="addForm.budgetCycle" placeholder="请选择预算周期">
            <el-option
              v-for="cycle in budgetCycles"
              :key="cycle.value"
              :label="cycle.label"
              :value="cycle.value"
            ></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="是否末级" prop="isLeaf" required>
          <el-radio-group v-model="addForm.isLeaf">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="状态" prop="status" required>
          <el-radio-group v-model="addForm.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="排序" prop="sortOrder">
          <el-input-number v-model="addForm.sortOrder" :min="0" :step="1"></el-input-number>
        </el-form-item>
        
        <el-form-item label="描述" prop="description">
          <el-input v-model="addForm.description" type="textarea" placeholder="请输入描述" :rows="3" maxlength="255"></el-input>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveAdd" :loading="addLoading">保存</el-button>
      </template>
    </el-dialog>
    
    <!-- 编辑成本项目对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑成本项目"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form :model="editForm" label-width="120px">
        <el-form-item label="项目编码" prop="itemCode" required>
          <el-input v-model="editForm.itemCode" placeholder="请输入项目编码" maxlength="50"></el-input>
        </el-form-item>
        
        <el-form-item label="项目名称" prop="itemName" required>
          <el-input v-model="editForm.itemName" placeholder="请输入项目名称" maxlength="100"></el-input>
        </el-form-item>
        
        <el-form-item label="项目类型" prop="itemType" required>
          <el-select v-model="editForm.itemType" placeholder="请选择项目类型">
            <el-option
              v-for="type in costItemTypes"
              :key="type.value"
              :label="type.label"
              :value="type.value"
            ></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="预算周期" prop="budgetCycle" required>
          <el-select v-model="editForm.budgetCycle" placeholder="请选择预算周期">
            <el-option
              v-for="cycle in budgetCycles"
              :key="cycle.value"
              :label="cycle.label"
              :value="cycle.value"
            ></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="是否末级" prop="isLeaf" required>
          <el-radio-group v-model="editForm.isLeaf">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="状态" prop="status" required>
          <el-radio-group v-model="editForm.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="排序" prop="sortOrder">
          <el-input-number v-model="editForm.sortOrder" :min="0" :step="1"></el-input-number>
        </el-form-item>
        
        <el-form-item label="描述" prop="description">
          <el-input v-model="editForm.description" type="textarea" placeholder="请输入描述" :rows="3" maxlength="255"></el-input>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit" :loading="editLoading">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { useCostItem } from '../hooks/useCostItem';

// 使用成本项目Hook
const {
  loading,
  searchForm,
  costItemList,
  pagination,
  viewDialogVisible,
  viewForm,
  editDialogVisible,
  editForm,
  editLoading,
  addDialogVisible,
  addForm,
  addLoading,
  costItemTypes,
  budgetCycles,
  formatStatus,
  formatCostType,
  formatBudgetCycle,
  formatIsLeaf,
  loadCostItems,
  handleSearch,
  resetSearch,
  handleSizeChange,
  handleCurrentChange,
  handleEdit,
  handleDelete,
  handleView,
  saveEdit,
  handleAdd,
  saveAdd
} = useCostItem();

// 组件挂载时加载数据
onMounted(() => {
  loadCostItems();
});
</script>

<style scoped>
.cost-item-container {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 40px);
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  color: #303133;
}

.search-container {
  background-color: #f5f7fa;
  padding: 16px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.search-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.action-container {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}

.table-container {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .cost-item-container {
    padding: 10px;
  }
  
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-form .el-form-item {
    margin-right: 0;
  }
  
  .el-table {
    font-size: 12px;
  }
  
  .el-table-column--selection {
    width: 40px !important;
  }
  
  .el-table .el-button {
    padding: 4px 8px;
    font-size: 12px;
  }
}
</style>